﻿<style type="text/css">

:root {
  --xBKColor: <%=Session("BKColor")%>;     /* 背景色較淺 */
  --xBKColor2: <%=Session("BKColor2")%>;   /* 背景色較深 */

  --xColor: <%=Session("Color")%>;     /* <TR>較淺 */
  --xColor1: <%=Session("Color1")%>;    /* <TR>較深 */
  --xBorderColor: <%=Session("BorderColor")%>;   /* 框線顏色 */

  --xColor2: <%=Session("Color2")%>;    /* 標題顏色較淺 */
  --xColor3: <%=Session("Color3")%>;    /* 標題顏色較深 */
  --xTFColor: <%=Session("TFColor")%>;  /* 標題文字顏色最深 */ 
  --xLAColor: <%=Session("LAColor")%>;  /* 編輯欄位說明文字顏色 */

}

/* 超連結設定 */
A:link {TEXT-DECORATION: none;COLOR: #0000FF}
A:visited {TEXT-DECORATION: none;COLOR: #000000}
A:active {TEXT-DECORATION: none;COLOR: #FF0000}
A:hover {COLOR: blue}

th {FONT-SIZE: 16px;
  FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
}

/*class=BrowerTable td，字形大小由 (.BrowerTable td) 設定 */
td {FONT-SIZE: 16px;
  FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
  padding:4px 4px 4px 4px; /* 上 右 下 左; */
  /*  white-space:nowrap; */
  /* overflow:hidden; */
}

span {vertical-align:top;
  FONT-SIZE: 16px;
  FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
}

body {margin :0 0 0 0; /* 上 右 下 左; */
      FONT-SIZE: 16px;
      FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
     }
     
ul{FONT-SIZE: 16px;
   FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
    /*display:block;*/
    list-style-type:none; /* 無前置 黑點*/
    /*margin:5px;*/
}

table{
  border-collapse:separate;
  border-spacing: 0;
}

/*------ 圓形訊息 DIV  -------------------------------------------------*/
.RoundMsgBox
{/*display:flex;*/
 /*flex-direction: row-reverse;*/
 font-size :16px;
 background:linear-gradient(#FFE66F,#FFFF37); /*黃*/
 justify-content: space-around; /*center; 每個物件 均分布置*/ 
 align-items: center; 
 text-align:center;        /*字水平居中 */ 
 float:right;               /* 水平排列 */
 padding:5px 5px 5px 5px;  /* 上 右 下 左; */
 border-radius: 50px  0px 0px 50px; /* 圓角度 左上，右上，右下，左下 */
 transition: flex 0.8s ease;
 
}

/*.RoundMsgBox:hover
{border-radius: 50px  0px 0px 50px; // 圓角度 左上，右上，右下，左下 
 padding-right:300px;
}
*/

.RoundInsideBox
{font-size:45px;
 font-family:微軟正黑體; 
 font-weight:bold;            /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 line-height:75px;            /*需與 height同值,字方可垂直居中，只在 DIV 有效 */
 float:left;               /* 水平排列 */
 /*background-color: #e7e7e7; */
 background:linear-gradient(#EA0000, #FF5151); /*紅*/
 /*border:  5px solid #666;*/
 width: 80px;
 height: 80px;
 border-radius: 50%; /*圓角值;*/
 user-select:none; /* 防止文字被滑鼠選取反白 */
 
}

/*------ BrowerTable  -------------------------------------------------*/
.BrowerTable, 
.EditTable
{border:0px solid; 
 border-collapse: separate;    /* 線框圓角 (separate=分離)模式下，表格中相臨格有各自的邊框*/
 border-spacing: 0;
 table-layout:fixed;
 word-wrap:break-word;
 word-break:break-all;
 padding:0px;       /* 區域內邊緣間距 */
}

.BrowerTable td
{FONT-SIZE:16px;
 height:22px;
 border-top:1px var(--xBorderColor) solid;    /*上方邊框寬度*/
 border-left:1px var(--xBorderColor) solid;   /*左邊的邊框寬度*/
 
 /*border:1px solid #6600CC;*/    /*上方邊框寬度 */
}

.EditTable td
{
 padding:4px;       /* 區域內邊緣間距 */
 line-height:28px;            /*需與 height同值,字方可垂直居中，只在 DIV 有效 */
 border-top:1px var(--xBorderColor) solid;    /*上方邊框寬度*/
 border-left:1px var(--xBorderColor) solid;   /*左邊的邊框寬度*/
 
 /*border:1px solid #6600CC;*/    /*上方邊框寬度 */
}

.BrowerTable td:last-child,
.EditTable td:last-child
{
 border-right:1px solid var(--xBorderColor);  /*右邊的邊框寬度 */
}

.BrowerTable tr:last-child > td,
.EditTable tr:last-child > td
{
 border-bottom:1px solid var(--xBorderColor);  /*底邊的邊框寬度 */
}

/* 左上角 */
.BrowerTable tr:first-child > td:first-child,
.EditTable tr:first-child > td:first-child
{
  border-top-left-radius: 5px;
  /*border-bottom-left-radius: 10px;*/
}

/* 右上角 */
.BrowerTable tr:first-child > td:last-child,
.EditTable tr:first-child > td:last-child{
  border-top-right-radius: 5px;
}

/*左下角*/
.BrowerTable tr:last-child > td:first-child,
.EditTable tr:last-child > td:first-child
{
  border-bottom-left-radius: 5px; /* 左下 */
}

/*右下角*/
.BrowerTable tr:last-child > td:last-child,
.EditTable tr:last-child > td:last-child
{
  border-bottom-right-radius: 5px; /* 右下 */
}

.LabelTD
{text-align:center;
 background-color:var(--xLAColor);
}

/*------ BrowerTable  end -------------------------------------------------*/

/* --- 瀏覽資料頁面用 --- */
.list0
{font-size:8pt;
 text-align:center;
 background-color:var(--xColor);
}
.list1 
{font-size:8pt; 
 text-align:center;
 background-color:var(--xColor1);
}
.list0:hover 
{font-size:8pt; 
 text-align:center; 
 background-color:#FFFF00;
}
.list1:hover 
{font-size:8pt; 
 text-align:center; 
 background-color:#FFFF00;
}
/* --- 瀏覽資料頁面用 ned --- */

/* 選取所有被禁用的元素 */
:disabled 
{
   background-color: #e2e1e1;  /* 設置背景顏色為灰色 */
   color: #8e8c8c;             /* 設置文字顏色為深灰色 */
   cursor: not-allowed;       /* 設置鼠標指針為禁止符號 */
}

/* ============== 自製 Edit ================= */
input[type="text"], input[type="password"]
{/*FONT-SIZE: 16px;*/
 /*height:25px;*/
    /* 隱藏原有格式 */
    appearance: none;
    -webkit-appearance: none;  
    outline: none;
    /* 顯示自製格式 */
    /* display: block; */
    height: 25px;
    /*padding: 2px 30px 3px 3px;*/ /*上、右、下、左*/
    font-size: 16px; 
    /* color: #242323; */
    background-image: none;
    border: 1px solid #717070; 
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0,.1); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1); 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
}
/* ============== 自製 Edit end ================= */
/* ============== 自製帶圖示 Edit ================= */
/*輸入框內的圖示屬性設定*/
.inputWithin {
  position: relative; 
  display: inline-block;
}		
.inputWithin .icon { /*左邊圖示*/
  position: absolute; 			
  left: 3px;
  top: calc(50% - 0.68em);
  cursor: hand;
}
.inputWithin .btn { /*右邊圖示*/
  position: absolute;
  right: 3px;
  top: calc(50% - 0.68em);
  cursor: hand;
}		

/*輸入框padding設定，用以保持文字與圖示的距離。*/
.inputPaddingLeft {
  padding-left: 24px; 
  padding-top: 10px; 		
  padding-bottom: 10px;
}
.inputPaddingRight {
  padding-right: 25px;
}
/* ============== 自製帶圖示 Edit end ================= */

/* --- 自製 Checked Box  --- */
input[type="checkbox"] 
   {/* 隱藏原有格式 */
    appearance: none;
    -webkit-appearance: none;  
    outline: none;
    /* 顯示自製格式 */
    display: inline-block;
    width: 20px;
    height: 20px;
    position: static;
    margin: 0px 2px 0 0px; /* 上 右 下 左; */
    vertical-align:-4px;
    border: 0px; 

    background: url('images/CheckBox-0.png');
    background-size: cover;
   }

input[type="checkbox"] + span
  {font-weight:bold;            /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
  user-select: none; /* 防止文字被滑鼠選取反白 */  
  }

input[type="checkbox"]:checked
  {
   background: url('images/CheckBox-1.png');
   background-size: cover;
  }    

input[type="checkbox"]:disabled
  {background: url('images/CheckBoxDisable-0.png');
   background-size: cover;
  }    

input[type="checkbox"]:checked:disabled
  {background: url('images/CheckBoxDisable-1.png');
   background-size: cover;
  }    
/* --- 自製 Checked Box ned --- */

/* --- 自製 Radio ---*/
input[type="radio"] 
   {/* 隱藏原有格式 */
    appearance: none;
    -webkit-appearance: none;  
    outline: none;
    /* 顯示自製格式 */
    display: inline-block;
    width: 20px;
    height: 20px;
    position: static;
    margin: 0px 2px 0 0px; /* 上 右 下 左; */
    vertical-align:-4px;
    border: 0px; 
    
    background: url('images/RadioBox-0.png');
    background-size: cover;
   }

input[type="radio"] + span
   {font-weight:bold;    /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
    user-select: none;   /* 防止文字被滑鼠選取反白 */  
   }

input[type="radio"]:checked
  {background: url('images/RadioBox-1.png');
   background-size: cover;
  }    

input[type="radio"]:disabled
  {background: url('images/RadioBoxDisable-0.png');
   background-size: cover;
  }    

input[type="radio"]:checked:disabled
  {background: url('images/RadioBoxDisable-1.png');
   background-size: cover;
  }    
/* --- 自製 Radio ned --- */

/* === 自製 Select === */
select 
{
   /* 隱藏原有格式 */
   appearance: none;
   -webkit-appearance: none;  
   outline: none;
   /* 顯示自製格式 */
   display: inline-block;     /* 緊接文字右邊顯示*/
   width: auto;
   height: 25px;
   padding: 3px 30px 2px 3px; /*上、右、下、左*/
   /* font-size: 16px; */
   line-height: 1.42857143;
   color: #242323;
   background-image: none;
   border: 1px solid #717070;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075); 
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
   /* 右邊倒三角形 */
   background: url(images/SelectDown.png) no-repeat scroll right center;/* transparent;*/
   background-color: #fff;
}

/* Webkit 瀏覽器（如 Chrome, Safari）專用的自定義滾動條(多筆顯示時) */
select::-webkit-scrollbar 
{
    width: 24px;
}

select::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0px 4px 4px 0px;  /*左上、右上、右下、左下*/
    position: relative;
}

select::-webkit-scrollbar-thumb {
    background:linear-gradient(#e1dede,#a9a8a8); /*背景漸層 #888;*/
    border-radius: 4px 4px 4px 4px;  /*左上、右上、右下、左下*/
  /* box-shadow:h-shadow v-shadow blur spread color inset;
     h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
 box-shadow: 1px 1px 1px rgba(100, 100, 100, 0.1) inset; /*陰影 (R,G,B,透明度)*/
    
}

select::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(#a7a6a6,#696868); /*背景漸層 #888;*/ 
  /* box-shadow:h-shadow v-shadow blur spread color inset;
     h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
 box-shadow: 1px 1px 1px rgba(189, 189, 189, 0.1) inset; /*陰影 (R,G,B,透明度)*/

}

/* 自定義下拉選單選項列表 */
select option 
{ background-color:#f0f78e; 
}

select option:checked 
{ background-color: blue;
  color: white;
}

/* 多行顯示，宣告 class='MultiLines' */
.MultiLines
{padding:3px;
 background-color:#f0f78e;
}

/* === 自製 Select end === */

/* ----------- 自製 TextArea ---------- */
textarea 
{
   /* 隱藏原有格式 */
   appearance: none;
   -webkit-appearance: none;  
   outline: none;
   /* 顯示自製格式 */
   display: inline-block;     /* 緊接文字右邊顯示*/
   padding: 3px 3px 3px 3px;  /*上、右、下、左*/
   /* font-size: 16px; */
   line-height: 1.42857143;
   color: #242323;
   background-image: none;
   border: 1px solid #717070;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075); 
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
   background-color: #fff;
   resize: none;
}

/* 無法編輯時 */
textarea:disabled 
{
    color: gray; /* 設定文字顏色 */
    background-color: #f0f0f0; /* 可選：設定背景色 */
}

/* Webkit 瀏覽器（如 Chrome, Safari）專用的自定義滾動條(多筆顯示時) */
textarea::-webkit-scrollbar 
{  
   width: 23px;
}

textarea::-webkit-scrollbar-track 
{  background: #f1f1f1;
   border-radius: 0px 4px 4px 0px;  /*左上、右上、右下、左下*/
   position: relative;
   cursor:hand;
}

textarea::-webkit-scrollbar-thumb
{
   background:linear-gradient(#e1dede,#a9a8a8); /*背景漸層 #888;*/
   border-radius: 4px 4px 4px 4px;  /*左上、右上、右下、左下*/
   /* box-shadow:h-shadow v-shadow blur spread color inset;
   h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
   box-shadow: 1px 1px 1px rgba(100, 100, 100, 0.1) inset; /*陰影 (R,G,B,透明度)*/
   cursor:hand;
    
}

textarea::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(#a7a6a6,#696868); /*背景漸層 #888;*/ 
  /* box-shadow:h-shadow v-shadow blur spread color inset;
     h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
 box-shadow: 1px 1px 1px rgba(189, 189, 189, 0.1) inset; /*陰影 (R,G,B,透明度)*/

}
/* ---------- 自製 TextArea end ---------- */

/* 給 DIV 高度 (float:left; 會忽略高度)*/
.clearfix::after 
{
  content:""; /* 2. 新增 content，注意需要加上 "" */
  display:table; /* 3. 新增 display，也可以用 table */
  clear: both;
}

/* 工作區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.WorkBox
{
/*position：absolute;*/
 float:left;         /* 水平排列 */
 padding:10px;       /* 區域內邊緣間距 */
 margin:5px 5px 5px 5px;   /* 區域外 上下左右邊界 */
 background:linear-gradient(var(--xBKColor),var(--xBKColor2)); /*背景漸層*/
 border-radius: 10px;	                      /* 圓角度 */
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*陰影 (R,G,B,透明度)*/
 z-index:0;              /* z-index的數字愈大，代表愈上層，同理愈小，代表愈底層。 */
}

/* 居中工作區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.WorkBox-center
{
 padding:5px;       /* 區域內邊緣間距 */
 width:780px;
 height:590px;
 left:50%;
 top:0px;
 background:linear-gradient(#DCB5FF,#BE77FF); /*背景漸層*/
 border-radius: 8px;	                      /* 圓角度 */
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*陰影 (R,G,B,透明度)*/
 /*visibility:hidden;*/
 margin-left: -390px;    /*寬度的一半*/
 z-index:0;
 position:absolute;
 /*position:fixed; */        /*固定位置，不會被捲動 */
}


/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.colhead-area 
{
 font-weight:bold;        /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 color: var(--xTFColor);
 text-align:center;       /*文字水平居中*/
 padding:4px 4px 4px 4px;  /* 底圖右邊緣間距 */
 margin: 0px auto;         /* 底圖上下左右邊界 */
 background:linear-gradient(var(--xColor2),var(--xColor3)); /*背景漸層*/
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.colhead-areaGreen 
{
 font-weight:bold;        /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 color: var(--xTFColor);
 text-align:center;        /*文字水平居中*/
 padding:4px 4px 4px 4px;  /* 底圖右邊緣間距 */
 margin: 0px auto;         /* 底圖上下左右邊界 */
 background:linear-gradient(#73BF00,#8CEA00); /*背景漸層*/
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.colhead-areaBlue          /*藍底*/
{
 font-weight:bold;        /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 color: var(--xTFColor);
 text-align:center;        /*文字水平居中*/
 padding:4px 4px 4px 4px;  /* 底圖右邊緣間距 */
 margin: 0px auto;         /* 底圖上下左右邊界 */
 background:linear-gradient(#a0eef8,hsl(180, 57%, 52%)); /*背景漸層*/
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.colhead-areaOrange        /*橘底*/ 
{
 font-weight:bold;        /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 color: var(--xTFColor);
 text-align:center;        /*文字水平居中*/
 padding:4px 4px 4px 4px;  /* 底圖右邊緣間距 */
 margin: 0px auto;         /* 底圖上下左右邊界 */
 background:linear-gradient(#f7c791,hsl(30, 79%, 60%)); /*背景漸層*/
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.colhead-areaPurple        /*紫底*/ 
{
 font-weight:bold;        /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 color: var(--xTFColor);
 text-align:center;        /*文字水平居中*/
 padding:4px 4px 4px 4px;  /* 底圖右邊緣間距 */
 margin: 0px auto;         /* 底圖上下左右邊界 */
 background:linear-gradient(#f0aff8,hsl(296, 80%, 65%)); /*背景漸層*/
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.colhead-areaRed        /*紅底*/ 
{
 font-weight:bold;        /*normal=預設值，可以不用設定、bold=粗體字型、bolder=更粗的字型(跟bold似乎沒什麼差異) */
 color: var(--xTFColor);
 text-align:center;        /*文字水平居中*/
 padding:4px 4px 4px 4px;  /* 底圖右邊緣間距 */
 margin: 0px auto;         /* 底圖上下左右邊界 */
 background:linear-gradient(#f86c6e,hsl(0, 96%, 63%)); /*背景漸層*/
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* 頁數顯示區 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.page-area 
{
 padding:4px 4px 4px 4px; /* 底圖右邊緣間距 */
 margin: 2px auto;   /* 底圖上下左右邊界 */
 /* background:linear-gradient(#8CEA00,#73BF00); */ /*背景漸層*/
 background:linear-gradient(var(--xColor2),var(--xColor3)); /*背景漸層*/
 
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 
 /* box-shadow:h-shadow v-shadow blur spread color inset;
  h-shadow：水平位移 v-shadow：垂直位移 blur：陰影大小 spread：擴散尺寸 color：顏色 inset：內陰影 */
}

/* --- 進度條視窗區 --- */
.ProgressBox 
{
 FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
 padding:10px;       /* 區域內邊緣間距 */
 height: 140px;
 width: 400px;
 top: 50%;               /*從上面開始算，下推 50% (一半) 的位置*/
 left: 50%;              /*從左邊開始算，右推 50% (一半) 的位置*/
 background:linear-gradient(#DCB5FF,#BE77FF); /*背景漸層*/
 border-radius: 8px;	                      /* 圓角度 */
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.02); /*陰影 (R,G,B,透明度)*/
 position: absolute;     /*絕對位置*/
 margin-top: -150px;     /*高度的一半*/
 margin-left: -200px;    /*寬度的一半*/
 z-index:900;            /* z-index的數字愈大，代表愈上層，同理愈小，代表愈底層。 */
 position:fixed;         /*固定位置，不會被捲動 */
 text-align:center;
}

/* --- 訊息視窗區 --- */
.MsgBox 
{
 FONT-FAMILY: "微軟正黑體","Microsoft JhengHei";
 padding:10px;       /* 區域內邊緣間距 */
 height: 300px;
 width: 600px;
 top: 50%;               /*從上面開始算，下推 50% (一半) 的位置*/
 left: 50%;              /*從左邊開始算，右推 50% (一半) 的位置*/
 background:linear-gradient(#FFD306,#AE8F00); /*背景漸層*/
 border-radius: 10px;	                      /* 圓角度 */
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*陰影 (R,G,B,透明度)*/
 position: absolute;     /*絕對位置*/
 transform: translate(-50%, -50%);
 /*margin-top: -150px;*/     /*高度的一半*/
 /*margin-left: -300px;*/    /*寬度的一半*/
 z-index:900;            /* z-index的數字愈大，代表愈上層，同理愈小，代表愈底層。 */
 position:fixed;         /*固定位置，不會被捲動 */
}

/* --- 訊息遮罩視窗區 --- */
.MsgBackBox 
{
 padding:0px;       /* 區域內邊緣間距 */
 height: 100%;
 width: 100%;
 top: 0px;               
 left:0px;              
 background:rgba(240, 240, 240, 0.5); /*背景漸層*/
 position: absolute;     /*絕對位置*/
 margin-top: 0px;     
 margin-left: 0px;    
 margin-bottom: 0px;    
 z-index:899;            /* z-index的數字愈大，代表愈上層，同理愈小，代表愈底層。 */
 position:fixed;
}

/* --- 輸入視窗區 --- */
.InputBox 
{
 padding:10px;       /* 區域內邊緣間距 */
 height: 300px;
 width: 600px;
 top: 50%;               /*從上面開始算，下推 50% (一半) 的位置*/
 left: 50%;              /*從左邊開始算，右推 50% (一半) 的位置*/
 background:linear-gradient(#FFD306,#AE8F00); /*背景漸層*/
 border-radius: 10px;	                      /* 圓角度 */
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*陰影 (R,G,B,透明度)*/
 position: absolute;     /*絕對位置*/
 margin-top: -150px;     /*高度的一半*/
 margin-left: -300px;    /*寬度的一半*/
 z-index:1001;            /* z-index的數字愈大，代表愈上層，同理愈小，代表愈底層。 */
 position:fixed;
}

/* --- 輸入遮罩視窗區 --- */
.InputBackBox 
{
 padding:0px;       /* 區域內邊緣間距 */
 height: 100%;
 width: 100%;
 top: 0px;               
 left:0px;              
 background:rgba(240, 240, 240, 0.5); /*背景漸層*/
 position: absolute;     /*絕對位置*/
 margin-top: 0px;     
 margin-left: 0px;    
 z-index:1000;            /* z-index的數字愈大，代表愈上層，同理愈小，代表愈底層。 */
 position:fixed;
}

 /* --- 地址輸入外框 ---*/
.AddrBox{
 padding:5px;       /* 區域內邊緣間距 */
 width:780px;
 height:590px;
 left:50%;
 top:0px;
 background:linear-gradient(#DCB5FF,#BE77FF); /*背景漸層*/
 border-radius: 8px;	                      /* 圓角度 */
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /*陰影 (R,G,B,透明度)*/
 /*visibility:hidden;*/
 margin-left: -390px;    /*寬度的一半*/
 z-index:900;
 position:absolute;
 /*position:fixed; */        /*固定位置，不會被捲動 */
}

/* --- 模擬 Select 元件 DIV 樣式  ------------------------------------*/
.SelectBox
{
 height:220px;
 width:150px;
 padding:5px;       /* 區域內邊緣間距 */
 overflow-y:scroll;
 line-height:20px;
 text-align:left;
 /*兩段式水平漸層，有畫頂線效果*/
 /*background:linear-gradient(180deg, #97CBFF 0px, #FFFFFF 5px);*/
 /*兩段式垂直漸層，有畫頂線效果*/
 background:linear-gradient(90deg, #FFFFDF, #FFFFFF);

 box-shadow:inset 1px 1px 2px #FFC1E0;    /*內陰影 1px 1px = 上邊+左邊*/
 
 border-radius: 3px;	                      /* 圓角度 */
}

/*div select 選項-樣式*/
.SelectBox span:hover
{display:block; /* 選擇列底色占滿整行 */
 background :linear-gradient(#66B3FF,#97CBFF); /*背景漸層-天藍*/
/*兩段式水平建層，有畫頂線效果*/
 /*
 background:linear-gradient(180deg,
    #97CBFF 0px, #FFFFFF 5px);
 */   
}
/* --- end 模擬 Select 元件 DIV 樣式  ---------------------------------------*/

</style>